<template>
  <div class="home">
    <div class="body">
      <div class="title">库存查询-上架下架查询</div>
      <div class="search">
        <div class="block">
          <span>厂家：</span>
          <el-select
            v-model="spell"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="changeCustomer"
            style="width:240px"
          >
            <el-option
              v-for="item in options"
              :key="item.FlnkID"
              :label="item.CustomerName"
              :value="item.FlnkID"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span>订单号：</span>
          <el-select v-model="orderOuterCode" placeholder="请选择" @change="changeCode" style="width:240px">
            <el-option
              v-for="item in orderCodeList"
              :key="item.FlnkID"
              :label="item.POCode"
              :value="item.OrderOuterCode"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span>款式：</span>
          <span>{{styleName}}</span>
        </div>
        <!-- <div class="block">
          <span>周转架：</span>
          <el-input v-model="orderNum" style="width:200px" placeholder="请输入周转架"></el-input>
        </div>-->
        <div class="block">
          <span>物料种类：</span>
          <el-select
            v-model="type"
            placeholder="请选择"
            style="width:240px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.FlnkID"
              :label="item.MaterielTypeName"
              :value="item.MaterielTypeCode"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
          ></el-date-picker>
        </div>
        <div class="block">
          <span>存货编码：</span>
          <el-input v-model="stockID" style="width:240px" placeholder="请输入存货编码"></el-input>
        </div>
        <div class="block">
          <el-button type="primary" style="width:240px;height:40px" @click="search()">查询</el-button>
        </div>
      </div>
      <div class="table-w">
        <el-table
          :data="statementList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
          highlight-current-row
          style="width: 100%;font-size:16px;"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column prop="BarCode" label="垛号" width="100" align="center" sortable></el-table-column>
          <el-table-column prop="CustomerName" label="厂家" align="center" sortable></el-table-column>
          <el-table-column prop="POCode" label="订单号" align="center" width="160"></el-table-column>
          <el-table-column prop="StyleName" label="款式" width="140" align="center" sortable></el-table-column>
          <el-table-column prop="StockID" label="存货编码" width="140" align="center" sortable></el-table-column>
          <el-table-column prop="MaterielName" label="物料名称" width="140" align="center"></el-table-column>
          <el-table-column prop="ColorConfigName" label="规格" width="120" align="center"></el-table-column>
          <el-table-column prop="SpecConfigName" label="型号" width="80" align="center"></el-table-column>
          <el-table-column prop="StockInt2" label="克重" width="80" align="center">
              <template slot-scope="scope">
                  {{scope.row.StockInt2 > 0 ? scope.row.StockInt2 : ''}}
              </template>
          </el-table-column>
          <el-table-column prop="TotalWeight" label="重量" width="120" align="center">
              <template slot-scope="scope">
                  <div v-if="scope.row.MaterielTypeCode === 'M'">{{Number(scope.row.TotalWeight).toFixed(3)}}{{scope.row.StockUnitName}}</div>
                  <div v-else>{{Number(scope.row.TotalWeight).toFixed()}}{{scope.row.StockUnitName}}</div>
              </template>
          </el-table-column>
          <el-table-column prop="StockInt1" label="匹数" width="60" align="center">
              <template slot-scope="scope">
                  {{scope.row.StockInt1 > 0 ? scope.row.StockInt1 : ''}}
              </template>
          </el-table-column>
          <el-table-column prop="WarehouseName" label="仓库" align="center" width="140"></el-table-column>
          <el-table-column prop="WarehouseKWName" label="原库位" width="160" align="center"></el-table-column>
          <el-table-column prop="RelaWarehouseKWName" label="目标库位" width="160" align="center"></el-table-column>
          <el-table-column prop="InventoryTime" label="发生时间" width="150" align="center" sortable>
            <template
              slot-scope="scope"
            >{{$moment(scope.row.InventoryTime).format('YYYY-MM-DD HH:mm')}}</template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          :current-page.sync="currentPage"
          @current-change="changePage()"
        ></el-pagination>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin'
import {getCustomerList, GetSaleContractListByCustomer} from '@/api/common'
import {getMoveList, GetMaterielTypeList} from '@/api/search'
export default {
  name: 'search',
  data () {
    return {
      statementList: [],
      orderNum: '',
      dateRange: [
        this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),
        this.$moment().format('YYYY-MM-DD')
      ],
      loading: false,
      spell: '',
      orderOuterCode: '',
      customerList: [],
      orderCodeList: [],
      styleName: '',
      options: [],
      count: 0,
      currentPage: 1,
      stockID: '',
      typeList: [],
      type: ''
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 流水记录
    getList () {
      let vm = this
      let params = new FormData()
      params.append(
        'CustomerFlnkID',
        vm.spell ? vm.spell : '00000000-0000-0000-0000-000000000000'
      )
      params.append('OrderOuterCode', vm.orderOuterCode)
      params.append('StyleFlnkID', '00000000-0000-0000-0000-000000000000')
      params.append('BarCode', '')
      params.append('Type', vm.type)
      params.append('StockID', vm.stockID)
      params.append(
        'StartDate',
        vm.$moment(vm.dateRange[0]).format('YYYY-MM-DD')
      )
      params.append(
        'EndDate',
        vm.$moment(vm.dateRange[1]).format('YYYY-MM-DD')
      )
      params.append('PageIndex', vm.currentPage - 1)
      params.append('PageSize', 10)
      getMoveList(params).then((response) => {
        if (response.data.data) {
          vm.statementList = response.data.data
          vm.count = response.data.count
        }
      })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.customerList.filter((item) => {
            return (
              item.SimpleSpell.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.options = this.customerList
      }
    },
    getCustomerList () {
      let vm = this
      let params = new FormData()
      params.append('Spell', vm.spell)
      params.append('BusinessScope', '')
      getCustomerList(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
          vm.options = response.data.data
        }
      })
    },
    getOrderCodeList () {
      let vm = this
      let params = new FormData()
      params.append('CustomFlnkID', vm.spell)
      params.append('IsAudit', 1)
      GetSaleContractListByCustomer(params).then((response) => {
        if (response.data) {
          vm.orderCodeList = response.data
        }
      })
    },
    changeCustomer () {
      let vm = this
      vm.getOrderCodeList()
    },
    changeCode () {
      let vm = this
      vm.styleName = vm.orderCodeList.filter((item) => {
        return item.OrderOuterCode === vm.orderOuterCode
      })[0].StyleName
    },
    search () {
      let vm = this
      vm.currentPage = 1
      vm.getList()
    },
    changePage () {
      let vm = this
      vm.getList()
    },
    getTypeList () {
      let vm = this
      GetMaterielTypeList().then((response) => {
        if (response.data.data) {
          vm.typeList = response.data.data
        }
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getList()
    vm.getCustomerList()
    vm.getTypeList()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/search/statement.scss";
</style>
